<template>
<div class="container">
  <swiper class="swiper-wrap" :options="swiperOption">
    <swiper-slide v-for="item in service.detail.img" :key="item" class="swiper-item"><img v-bind:src="item" alt="item" /></swiper-slide>
  </swiper>
  <div class="service-info">
    <div class='servive-head'>
      <div class="title">{{service.detail.title}}</div>
      <div class="star-wrap">
        <img src='../assets/img/rank-star.png' />
        <span class='rank-score'>{{service.average || 5}}</span>
      </div>
    </div>
    <div class="price-wrap">
      <div class="range-price">
        <span class='price'>¥ {{service.detail.now_amount_price}}/{{service.detail.time_type == 1? '时':service.detail.time_type == 2? '天':'月'}}</span>
        <span class="rent-time" v-if="service.detail.rent_range_time">最低{{service.detail.rent_range_time}}{{service.detail.time_type == 1? '小时':service.detail.time_type == 2? '天':'个月'}}起租</span>
      </div>
      <div class="hotter">
        <img class='hotimg' src='../assets/img/hoter.png'>
        <span class="hotspan">{{service.detail.browse_num > 1000? '999+' : service.detail.browse_num}}</span>
      </div>
    </div>
  </div>

  <div class='label-wrap'>
    <div class='label'><img src='../assets/img/label-icon.png' />服务保证</div>
    <div class='label'><img src='../assets/img/label-icon.png' />效率高</div>
    <div class='label'><img src='../assets/img/label-icon.png' />服务态度好</div>
  </div>
  <div class='hr-line'></div>
  <div class='cards-wrap'>
    <div class='cards-title item-head'>优惠活动</div>
    <div class='cards-info' v-if="service.preferential">
      <span class='clabel'>限时优惠</span>
      <span class='cif'>{{service.preferential}}</span>
    </div>
    <div class='cards-grap'>
      <div class="card-wrap">
        <div v-for="item in service.card" :key="item.card_price" class='card-item'>
          <div style='display:flex'>
            <div class="card-price">￥<span style='font-size:28px;'>{{item.card_price}}</span></div>
            <div class='card-sale-info'>优惠券满{{item.is_price}}立减</div>
          </div>
          <div class="wx-card-wrap">
            <img v-if="item.using == 0" src='../assets/img/receive.png' />
            <img v-if="item.using == 1" src='../assets/img/received.png' />
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="hr-line"></div>
  <div class="comments-wrap">
    <div class="comment-title">
      <span class="item-head">服务商</span>
      <img class="ar" src='../assets/img/order-more.png'>
      <span class="serv-txt">全部 {{service.service_user_info.service_count}} 个服务</span>
    </div>
    <div class="serv-info">
      <img class='serv-avatar' :src='service.service_user_info.logo'>
      <span class="serv-name">{{service.service_user_info.company_name}}</span>
    </div>
  </div>
  <div class="hr-line"></div>
  <div class="comments-wrap" v-if="service.deploy_info">
    <div class="comment-title">
      <div class="item-head">服务与设施</div>
      <div class='cards-grap'>
        <div class="card-wrap">
          <div class="deploy-item" v-for="item in service.deploy_info" :key="item.img">
            <img :src="item.img">
            <p>{{item.name}}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="hr-line"></div>
  <div class="comments-wrap">
    <div class="comment-title item-head">
      全部评论 {{service.comment_num}} | 服务次数 {{service.service_num}}
      <img class="ar" src='../assets/img/order-more.png'>
    </div>
    <div class="comment-labels" v-if="service.sign">
      <span v-for="item in service.sign" :key="item.name">{{item.name}} {{item.num}}</span>
    </div>
    <div class="comment-info" v-if="service.comment[0]">
      <img class='coment-avatar' :src="avatarComputed" />
      <div class='comment-detail-wrap'>
        <div class="wx-name">{{service.comment[0].wx_name}}</div>
        <div class="wx-comment">
          {{service.comment[0].comment}}
        </div>
        <div class="wx-time">{{service.comment[0].date_time}}</div>
      </div>
    </div>
  </div>
  <div v-if="service.detail.must_inform">
    <div class="hr-line"></div>
    <div class="must-wrap">
      <div class="map-title">
        <div class="must-title">交易须知</div>
        <div class="must-note">{{service.detail.must_inform}}</div>
      </div>
    </div>
  </div>
  <div class='service-hr'>
    <span class='service-line'></span>工位详情<span class='service-line'></span>
  </div>
  <div class='sevice-detail' v-html='service.detail.service_introduce'></div>
  <button class="bottom-btn" @click="downloadApp">
    点击下载创享App
  </button>
</div>
</template>

<script>
import axios from 'axios'
const API_PROXY = 'https://bird.ioliu.cn/v1/?url='

export default {
  name: 'HelloWorld',
  data () {
    return {
      service: {
        card: [],
        detail: {
          img: []
        },
        comment: [],
        service_user_info: {}
      },
      swiperOption: {
        autoplay: true,
        loop: true,
        effect: 'slide'
      }
    }
  },

  computed: {
    avatarComputed: function () {
      if (this.service.comment[0]) {
        if (this.service.comment[0].app_avatar) {
          return this.service.comment[0].app_avatar
        } else if (this.service.comment[0].business_card) {
          return this.service.comment[0].business_card
        } else {
          return null
        }
      } else {
        return null
      }
    }
  },

  mounted: function () {
    this.service_id = this.getUrlParam('service_id')
    this.site_type = this.getUrlParam('site_type')
    this.user_id = this.getUrlParam('user_id')
    this.wuser_id = this.getUrlParam('wuser_id')
    this.getDetail(this.service_id, this.site_type, this.user_id, this.wuser_id)
  },

  methods: {
    // get url参数方法
    getUrlParam: function (name) {
      var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)')
      var r = window.location.search.substr(1).match(reg)
      if (r != null) {
        return decodeURI(r[2])
      }
      return null
    },

    downloadApp: function () {
      window.location.href = 'https://v2.crejoy.cn/live-web-lastest/loc.php?action=activity'
    },

    getDetail: function (a, b, c, d) {
      let self = this
      axios.post(API_PROXY + 'https://erp.crejoy.cn/api/Service_info/detail', {
        code_type: 10,
        service_id: a,
        site_type: b,
        user_id: c,
        wuser_id: d
      }).then((value) => {
        self.service = value.data.data
        console.log(self.service)
      })
    }
  }
}
</script>

<style>
@import '../assets/css/hello.css'
</style>
